<!-- 海关编码增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}

.unit-select {
  ::v-deep {
    .el-input {
      width: 100%;
    }
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    width="30"
    :title="`${status === 'create' ? '新增' : '编辑'}词语`"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="hjd-drawer__content">
      <el-form ref="dataForm" :model="form" label-width="100px" style="margin-left: 20px; margin-right: 20px;">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="第一法定单位" prop="first_unit">
          <el-select v-model="form.first_unit" class="unit-select" filterable>
            <el-option
              v-for="item in unitList"
              :key="item.title"
              :label="item.title"
              :value="item.title"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="第二法定单位" prop="second_unit">
          <el-select v-model="form.second_unit" class="unit-select" filterable>
            <el-option
              v-for="item in unitList"
              :key="item.title"
              :label="item.title"
              :value="item.title"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="海关编码" prop="hscode">
          <el-input v-model="form.hscode" />
        </el-form-item>

        <el-form-item label="税率" prop="tax_rate">
          <el-input v-model="form.tax_rate">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item label="是否启用" prop="status">
          <el-switch v-model="form.status" />
        </el-form-item>

        <div class="hjd-drawer__footer">
          <el-button @click="showDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </div>

      </el-form>
    </div>
  </el-drawer>
</template>

<script>

import _ from 'lodash'

import { addHscode, editHscode } from '@/api/base/hscode'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'new'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showDialog: this.visible,

      beforeData: {},

      unitList: [],

      /**
       * 表单内容
       */
      form: {
        hscode: '',
        name: '',
        first_unit: '',
        second_unit: '',
        tax_rate: '',
        status: 1
      }
    }
  },

  async created() {
    this.beforeData = _.cloneDeep(this.data)
    if (this.status === 'update') {
      const data = _.cloneDeep(this.data)
      this.form = {
        ...this.form,
        ...data
      }
    }

    this.unitList = await this.$store.dispatch('app/getUnit')
  },

  methods: {
    submit() {
      // 数据没改动 直接关闭弹窗
      if (_.isEqual(this.form, this.beforeData)) {
        this.showDialog = false
        return
      }

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 是否是创建
          const isCreate = this.status === 'create'

          // 请求数据
          const queryData = {
            hscode: this.form.hscode,
            name: this.form.name,
            first_unit: this.form.first_unit,
            second_unit: this.form.second_unit,
            tax_rate: this.form.tax_rate,
            status: this.form.status
          }

          // 修改时传 ID
          if (!isCreate) queryData['hscode_id'] = this.data.hscode_id

          // 请求接口
          const request = isCreate ? addHscode : editHscode
          request(queryData).then(() => {
            this.data.hscode = this.form.hscode
            this.data.name = this.form.name
            this.data.first_unit = this.form.first_unit
            this.data.second_unit = this.form.second_unit
            this.data.tax_rate = this.form.tax_rate
            this.data.status = this.form.status

            this.showDialog = false
            this.$notify.success(isCreate ? '创建成功' : '修改成功')
            // 刷新列表
            // this.$emit('reload')
          })
        }
      })
    }
  }
}
</script>
